<template>
    <div class="edit-pass">
        <div class="tip">
            <span>注意啦：</span> 修改完密码之后需要重新进行登录
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="当前密码" prop="pass">
                <el-input v-model="ruleForm.pass"></el-input>
                <span>当前密码强度符合要求</span>
            </el-form-item>
            <el-form-item label="新密码" prop="pass">
                <el-input v-model="ruleForm.pass"></el-input>
                <span>密码长度至少6位；字符种类至少1种（数字，大写字母，小写字母，标点符号）</span>
            </el-form-item>
            <el-form-item label="新密码确认" prop="pass">
                <el-input v-model="ruleForm.pass"></el-input>
                <span>确认密码和新密码保持一致</span>
            </el-form-item>
            <el-form-item label="验证码" prop="pass">
                <el-input v-model="ruleForm.pass"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                pass: '',
                newPass:'',
                confirmPass:'',
                code:''
            },
            rules: {
                pass: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.edit-pass {
    .tip {
        background-color: #FDFFE5;
        color: #C29D36;
        margin: 40px 15px 15px;
        padding: 10px;
        font-size:14px;
        span {
            font-size: 20px;
            color: red;
        }
    }
    .el-form{
        width: 80%;
        margin-top: 20px;
        .el-input{
            width:60%;
        }
        span{
            margin-left: 10px;
            color: gray;
            font-size: 12px;
        }
    }
}
</style>